<template>
    <div class="addEdit-block" style="width: 100%">
        <el-form
            class="add-update-preview"
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="180px"
        >
            <template>
                <el-form-item class="select" v-if="type !== 'info'" label="老人编号" prop="laorenbianhao">
                    <el-select
                        :disabled="ro.laorenbianhao"
                        @change="laorenbianhaoChange"
                        v-model="ruleForm.laorenbianhao"
                        placeholder="请选择老人编号"
                    >
                        <el-option v-for="(item, index) in laorenbianhaoOptions" :key="index" :label="item" :value="item"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    class="input"
                    v-else-if="ruleForm.laorenbianhao"
                    label="老人编号"
                    prop="laorenbianhao"
                >
                    <el-input v-model="ruleForm.laorenbianhao" placeholder="老人编号" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="老人姓名" prop="laorenxingming">
                    <el-input v-model="ruleForm.laorenxingming" placeholder="老人姓名" clearable :readonly="ro.laorenxingming"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="老人姓名" prop="laorenxingming">
                    <el-input v-model="ruleForm.laorenxingming" placeholder="老人姓名" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="家属姓名" prop="jiashuxingming">
                    <el-input v-model="ruleForm.jiashuxingming" placeholder="家属姓名" clearable :readonly="ro.jiashuxingming"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="家属姓名" prop="jiashuxingming">
                    <el-input v-model="ruleForm.jiashuxingming" placeholder="家属姓名" readonly></el-input>
                </el-form-item>
                <el-form-item class="input" v-if="type !== 'info'" label="手机号" prop="shoujihao">
                    <el-input v-model="ruleForm.shoujihao" placeholder="手机号" clearable :readonly="ro.shoujihao"></el-input>
                </el-form-item>
                <el-form-item v-else class="input" label="手机号" prop="shoujihao">
                    <el-input v-model="ruleForm.shoujihao" placeholder="手机号" readonly></el-input>
                </el-form-item>
                <el-form-item
                    class="upload"
                    v-if="type !== 'info' && !ro.jiankangma"
                    label="健康码"
                    prop="jiankangma"
                >
                    <file-upload
                        tip="点击上传健康码"
                        action="file/upload"
                        :limit="3"
                        :multiple="true"
                        :fileUrls="ruleForm.jiankangma ? ruleForm.jiankangma : ''"
                        @change="jiankangmaUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item
                    class="upload"
                    v-else-if="ruleForm.jiankangma"
                    label="健康码"
                    prop="jiankangma"
                >
                    <img
                        v-if="ruleForm.jiankangma.substring(0, 4) === 'http'"
                        class="upload-img"
                        :key="index"
                        :src="ruleForm.jiankangma.split(',')[0]"
                        width="100"
                        height="100"
                    />
                    <img
                        v-else
                        class="upload-img"
                        :key="index"
                        v-for="(item, index) in ruleForm.jiankangma.split(',')"
                        :src="$base.url + item"
                        width="100"
                        height="100"
                    />
                </el-form-item>
                <el-form-item
                    class="upload"
                    v-if="type !== 'info' && !ro.xingchengma"
                    label="行程码"
                    prop="xingchengma"
                >
                    <file-upload
                        tip="点击上传行程码"
                        action="file/upload"
                        :limit="3"
                        :multiple="true"
                        :fileUrls="ruleForm.xingchengma ? ruleForm.xingchengma : ''"
                        @change="xingchengmaUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item
                    class="upload"
                    v-else-if="ruleForm.xingchengma"
                    label="行程码"
                    prop="xingchengma"
                >
                    <img
                        v-if="ruleForm.xingchengma.substring(0, 4) === 'http'"
                        class="upload-img"
                        :key="index"
                        :src="ruleForm.xingchengma.split(',')[0]"
                        width="100"
                        height="100"
                    />
                    <img
                        v-else
                        class="upload-img"
                        :key="index"
                        v-for="(item, index) in ruleForm.xingchengma.split(',')"
                        :src="$base.url + item"
                        width="100"
                        height="100"
                    />
                </el-form-item>
                <el-form-item
                    class="select"
                    v-if="type !== 'info'"
                    label="核酸检测结果"
                    prop="hesuanjiancejieguo"
                >
                    <el-select :disabled="ro.hesuanjiancejieguo" v-model="ruleForm.hesuanjiancejieguo" placeholder="请选择核酸检测结果">
                        <el-option v-for="(item, index) in hesuanjiancejieguoOptions" :key="index" :label="item" :value="item"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else class="input" label="核酸检测结果" prop="hesuanjiancejieguo">
                    <el-input v-model="ruleForm.hesuanjiancejieguo" placeholder="核酸检测结果" readonly></el-input>
                </el-form-item>
                <el-form-item class="date" v-if="type !== 'info'" label="探望时间" prop="tanwangshijian">
                    <el-date-picker
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        v-model="ruleForm.tanwangshijian"
                        type="date"
                        :readonly="ro.tanwangshijian"
                        placeholder="探望时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item
                    class="input"
                    v-else-if="ruleForm.tanwangshijian"
                    label="探望时间"
                    prop="tanwangshijian"
                >
                    <el-input v-model="ruleForm.tanwangshijian" placeholder="探望时间" readonly></el-input>
                </el-form-item>
            </template>
            <el-form-item class="textarea" v-if="type !== 'info'" label="备注" prop="beizhu">
                <el-input type="textarea" :rows="8" placeholder="备注" v-model="ruleForm.beizhu">
                </el-input>
            </el-form-item>
            <el-form-item v-else-if="ruleForm.beizhu" label="备注" prop="beizhu">
                <span>{{
                    ruleForm.beizhu
                }}</span>
            </el-form-item>
          <el-form-item class="btn">
            <template v-if="type !== 'info'">
              <el-button type="primary" class="btn-success" @click="onSubmit">提交</el-button>
              <el-button class="btn-close" @click="back()">取消</el-button>
            </template>
            <el-button v-else-if="type === 'info'" class="btn-close" @click="back()">返回</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard } from '@/utils/validate';
export default {
    data() {
        let self = this;
        var validateIdCard = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!checkIdCard(value)) {
                callback(new Error('请输入正确的身份证号码'));
            } else {
                callback();
            }
        };
        var validateUrl = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isURL(value)) {
                callback(new Error('请输入正确的URL地址'));
            } else {
                callback();
            }
        };
        var validateMobile = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isMobile(value)) {
                callback(new Error('请输入正确的手机号码'));
            } else {
                callback();
            }
        };
        var validatePhone = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isPhone(value)) {
                callback(new Error('请输入正确的电话号码'));
            } else {
                callback();
            }
        };
        var validateEmail = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isEmail(value)) {
                callback(new Error('请输入正确的邮箱地址'));
            } else {
                callback();
            }
        };
        var validateNumber = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isNumber(value)) {
                callback(new Error('请输入数字'));
            } else {
                callback();
            }
        };
        var validateIntNumber = (rule, value, callback) => {
            if (!value) {
                callback();
            } else if (!isIntNumer(value)) {
                callback(new Error('请输入整数'));
            } else {
                callback();
            }
        };
        return {
            id: '',
            type: '',

            ro: {
                laorenbianhao: false,
                laorenxingming: false,
                jiashuxingming: false,
                shoujihao: false,
                jiankangma: false,
                xingchengma: false,
                hesuanjiancejieguo: false,
                tanwangshijian: false,
                beizhu: false,
            },

            ruleForm: {
                laorenbianhao: '',
                laorenxingming: '',
                jiashuxingming: '',
                shoujihao: '',
                jiankangma: '',
                xingchengma: '',
                hesuanjiancejieguo: '',
                tanwangshijian: '',
                beizhu: '',
            },

            laorenbianhaoOptions: [],
            hesuanjiancejieguoOptions: [],

            rules: {
                laorenbianhao: [],
                laorenxingming: [],
                jiashuxingming: [],
                shoujihao: [],
                jiankangma: [],
                xingchengma: [],
                hesuanjiancejieguo: [],
                tanwangshijian: [],
                beizhu: [],
            },
        };
    },
    props: ['parent'],
    computed: {},
    components: {},
    created() {
        this.ruleForm.tanwangshijian = this.getCurDate();
    },
    methods: {
        // 下载
        download(file) {
            window.open(`${file}`);
        },
        // 初始化
        init(id, type) {
            if (id) {
                this.id = id;
                this.type = type;
            }
            if (this.type === 'info' || this.type === 'else') {
                this.info(id);
            } else if (this.type === 'logistics') {
                this.logistics = false;
                this.info(id);
            } else if (this.type === 'cross') {
                var obj = this.$storage.getObj('crossObj');
                for (var o in obj) {
                    if (o === 'laorenbianhao') {
                        this.ruleForm.laorenbianhao = obj[o];
                        this.ro.laorenbianhao = true;
                        continue;
                    }
                    if (o === 'laorenxingming') {
                        this.ruleForm.laorenxingming = obj[o];
                        this.ro.laorenxingming = true;
                        continue;
                    }
                    if (o === 'jiashuxingming') {
                        this.ruleForm.jiashuxingming = obj[o];
                        this.ro.jiashuxingming = true;
                        continue;
                    }
                    if (o === 'shoujihao') {
                        this.ruleForm.shoujihao = obj[o];
                        this.ro.shoujihao = true;
                        continue;
                    }
                    if (o === 'jiankangma') {
                        this.ruleForm.jiankangma = obj[o];
                        this.ro.jiankangma = true;
                        continue;
                    }
                    if (o === 'xingchengma') {
                        this.ruleForm.xingchengma = obj[o];
                        this.ro.xingchengma = true;
                        continue;
                    }
                    if (o === 'hesuanjiancejieguo') {
                        this.ruleForm.hesuanjiancejieguo = obj[o];
                        this.ro.hesuanjiancejieguo = true;
                        continue;
                    }
                    if (o === 'tanwangshijian') {
                        this.ruleForm.tanwangshijian = obj[o];
                        this.ro.tanwangshijian = true;
                        continue;
                    }
                    if (o === 'beizhu') {
                        this.ruleForm.beizhu = obj[o];
                        this.ro.beizhu = true;
                        continue;
                    }
                }
            }

            // 获取用户信息
            this.$http({
                url: `${this.$storage.get('sessionTable')}/session`,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    var json = data.data;
                } else {
                    this.$message.error(data.msg);
                }
            });

            this.$http({
                url: `option/laoren/laorenbianhao`,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.laorenbianhaoOptions = data.data;
                } else {
                    this.$message.error(data.msg);
                }
            });
            this.hesuanjiancejieguoOptions = '阴性,阳性'.split(',');
        },
        // 下二随
        laorenbianhaoChange() {
            this.$http({
                url: `follow/laoren/laorenbianhao?columnValue=` + this.ruleForm.laorenbianhao,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    if (data.data.laorenxingming) {
                        this.ruleForm.laorenxingming = data.data.laorenxingming;
                    }
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
        // 多级联动参数

        info(id) {
            this.$http({
                url: `jiashutanwang/info/${id}`,
                method: 'get',
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.ruleForm = data.data;
                    //解决前台上传图片后台不显示的问题
                    let reg = new RegExp('../../../upload', 'g'); //g代表全部
                } else {
                    this.$message.error(data.msg);
                }
            });
        },

        // 提交
        onSubmit() {
            if (this.ruleForm.jiankangma !== null) {
                this.ruleForm.jiankangma = this.ruleForm.jiankangma.replace(new RegExp(this.$base.url, 'g'), '');
            }

            if (this.ruleForm.xingchengma !== null) {
                this.ruleForm.xingchengma = this.ruleForm.xingchengma.replace(new RegExp(this.$base.url, 'g'), '');
            }

            var objcross = this.$storage.getObj('crossObj');

            //更新跨表属性
            var crossuserid;
            var crossrefid;
            var crossoptnum;
            if (this.type === 'cross') {
                var statusColumnName = this.$storage.get('statusColumnName');
                var statusColumnValue = this.$storage.get('statusColumnValue');
                if (statusColumnName !== '') {
                    var obj = this.$storage.getObj('crossObj');
                    if (statusColumnName && !statusColumnName.startsWith('[')) {
                        for (var o in obj) {
                            if (o === statusColumnName) {
                                obj[o] = statusColumnValue;
                            }
                        }
                        var table = this.$storage.get('crossTable');
                        this.$http({
                            url: `${table}/update`,
                            method: 'post',
                            data: obj,
                        }).then(({ data }) => {});
                    } else {
                        crossuserid = this.$storage.get('userid');
                        crossrefid = obj['id'];
                        crossoptnum = this.$storage.get('statusColumnName');
                        crossoptnum = crossoptnum.replace(/\[/, '').replace(/\]/, '');
                    }
                }
            }
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    if (crossrefid && crossuserid) {
                        this.ruleForm.crossuserid = crossuserid;
                        this.ruleForm.crossrefid = crossrefid;
                        let params = {
                            page: 1,
                            limit: 10,
                            crossuserid: this.ruleForm.crossuserid,
                            crossrefid: this.ruleForm.crossrefid,
                        };
                        this.$http({
                            url: 'jiashutanwang/page',
                            method: 'get',
                            params: params,
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                if (data.data.total >= crossoptnum) {
                                    this.$message.error(this.$storage.get('tips'));
                                    return false;
                                } else {
                                    this.$http({
                                        url: `jiashutanwang/${!this.ruleForm.id ? 'save' : 'update'}`,
                                        method: 'post',
                                        data: this.ruleForm,
                                    }).then(({ data }) => {
                                        if (data && data.code === 0) {
                                            this.$message({
                                                message: '操作成功',
                                                type: 'success',
                                                duration: 1500,
                                                onClose: () => {
                                                    this.parent.showFlag = true;
                                                    this.parent.addOrUpdateFlag = false;
                                                    this.parent.jiashutanwangCrossAddOrUpdateFlag = false;
                                                    this.parent.search();
                                                    this.parent.contentStyleChange();
                                                },
                                            });
                                        } else {
                                            this.$message.error(data.msg);
                                        }
                                    });
                                }
                            } else {
                            }
                        });
                    } else {
                        this.$http({
                            url: `jiashutanwang/${!this.ruleForm.id ? 'save' : 'update'}`,
                            method: 'post',
                            data: this.ruleForm,
                        }).then(({ data }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.parent.showFlag = true;
                                        this.parent.addOrUpdateFlag = false;
                                        this.parent.jiashutanwangCrossAddOrUpdateFlag = false;
                                        this.parent.search();
                                        this.parent.contentStyleChange();
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                }
            });
        },
        // 获取uuid
        getUUID() {
            return new Date().getTime();
        },
        // 返回
        back() {
            this.parent.showFlag = true;
            this.parent.addOrUpdateFlag = false;
            this.parent.jiashutanwangCrossAddOrUpdateFlag = false;
            this.parent.contentStyleChange();
        },
        jiankangmaUploadChange(fileUrls) {
            this.ruleForm.jiankangma = fileUrls;
        },
        xingchengmaUploadChange(fileUrls) {
            this.ruleForm.xingchengma = fileUrls;
        },
    },
};
</script>
